<template>
    <Viewport title="Writeboard" icon="/src/assets/icons/writeboard.png" :class="{'z-40': true}" @muti="muti" @cancel="cancel" @mousedown="changeFocus">
        <!-- <div class="absolute h-full w-full"> -->
        <div id='container' class=" h-full w-full bg-white overflow-hidden">
            <canvas
                id="canvas"
                :width="dimension.width * dpr"
                :height="dimension.height * dpr"
                :style="{
                    width: dimension.width + 'px',
                    height: dimension.height + 'px'
                }"
                v-draw="color"
                :color="color"

            ></canvas>
            <div class=" flex absolute h-1/11 w-1/3 bottom-0 left-1/3 items-end justify-around shadow-10">
                <img class=" h-3/4 inline-block" src="/src/assets/icons/pen.png"/>
                <div :class="{button: color !== 'rgb(239, 68, 68)', 'button-active': color === 'rgb(239, 68, 68)'} " :style="{backgroundColor: 'rgb(239, 68, 68)'}" @click="() => changeColor('rgb(239, 68, 68)')"></div>
                <div :class="{button: color !== 'rgb(99, 102, 241)', 'button-active': color === 'rgb(99, 102, 241)'} " :style="{backgroundColor: 'rgb(99, 102, 241)'}" @click="() => changeColor('rgb(99, 102, 241)')"></div>
                <div :class="{button: color !== 'rgb(16, 185, 129)', 'button-active': color === 'rgb(16, 185, 129)'} " :style="{backgroundColor: 'rgb(16, 185, 129)'}" @click="() => changeColor('rgb(16, 185, 129)')"></div>
                <div :class="{button: color !== 'rgb(0, 0, 0)', 'button-active': color === 'rgb(0, 0, 0)'} " :style="{backgroundColor: 'rgb(0, 0, 0)'}" @click="() => changeColor('rgb(0, 0, 0)')"></div>
                <img class=" h-3/4 inline-block border-gray-400" @click="() => changeColor('rgb(255, 255, 255)')" src="/src/assets/icons/eraser.png"/>
                <img class=" h-3/4 inline-block" src="/src/assets/icons/trash.png" @click="trash"/>
            </div>
        </div>
        
        <!-- </div> -->
        
    </Viewport>
</template>

<script setup>
    import { onUnmounted, watch, onMounted, nextTick, toRefs, computed } from 'vue';
    import { reactive, ref} from 'vue';
    import Viewport from '../components/Viewport.vue';
    import vDraw from './directive/draw';
    import {store} from '../store/index'

    let dimension = reactive({
        width: 400,
        height: 400
    })

    const dpr = ref(window.devicePixelRatio)
    const list = matchMedia(`(resolution: ${dpr}dppx)`)
    const update = () => dpr.value = window.devicePixelRatio
    list.addEventListener('change', update)
    
    let canvas, ctx, container
    const color = ref('rgb(0, 0, 0)')
    const changeColor = (clr) => {
        color.value = clr
        if(color.value === 'rgb(255, 255, 255)') {
            container.style.cursor = 'url("/src/assets/icons/eraser.ico")'
        }
    }
    const eraser = ref(false)
    const trash = () => {
        console.log(1)
        ctx.fillStyle = 'rgb(255, 255, 255)'
        ctx.fillRect (0, 0, 3000, 3000);
    }

    onMounted(() => {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');    
        container = document.getElementById('container')
        watch(() => document.defaultView.getComputedStyle(container, false)['width'],
            (newVal) => {
                dimension.width = parseInt(newVal)   
                console.log(canvas)         
            }, {
                immediate: true
            }
        )  
        watch(() => document.defaultView.getComputedStyle(container, false)['height'], 
            (newVal) => {
                console.log(newVal)
                dimension.height = parseInt(newVal)
            }, {
                immediate: true
            }
        )
        watch(() => dpr, 
        () => {
            ctx.setTransform(1, 0, 0, 1, 0, 0); // scale 前先恢复变换矩阵，不然会重复 scale
            ctx.scale(dpr.value, dpr.value);  
        }, {
            immediate: true
        })
    })

    onUnmounted(() => {
        list.removeEventListener('change', update)
    })

    // let prev = { x: 0, y = 0 }
    // const draw = e => {
    //     const {offsetX, offsetY} = e
    //     const {x, y} = canvas.getBoundingClientRect()
    //     const pointer = {
    //         x: offsetX - x,
    //         y: offsetY - y
    //     }

    //     ctx.lineCap = 'round'
    //     ctx.lineJoin = 'round'
        
    //     ctx.beginPath()
    //     prev.x = pointer.x
    //     prev.y = pointer.y
    //     ctx.moveTo(prev.x, prev.y)

    // }

    const focus = computed(() => store.state.focus === 'writeboard')
    const muti = () => store.commit('CHANGE_WRITEBOARD_SHOW', false)
    const cancel = () => {
        store.commit('CHANGE_WRITEBOARD_ACTIVE', false)
        store.commit('CHANGE_WRITEBOARD_SHOW', true)
    }
    const changeFocus = () => {
        store.commit('CHANGE_FOCUS', 'writeboard')
    } 

</script>

<style scoped>

#container {
position: relative;
}

#canvas {
    touch-action: none; /* 禁用浏览器默认的触控响应，以更好支持多指绘制 */
    user-select: none;
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    transform: scale();
}

.button {
    @apply h-8 w-8 inline-block rounded-full
}
.button-active {
    @apply h-8 w-8 inline-block rounded-full transform -translate-y-2 transition-all
}

</style>